<template>
  <base-container>
    <div class="flex px-16px py-10px illustrate mb-16px">
      <div><img alt="" class="w-20px h-20px" src="../../assets/application/illustrate.png" /></div>
      <div class="ml-8px text-14px font-400 line-height-24px">
        <div>1.平台端统计了平台及旗下商家的应用消费数据。</div>
        <div>2.因商家已充值到平台，商家消费时会先划扣商家的资金账户，再划扣平台的账户。</div>
        <div>3.扣费时A类应用从平台的资金账户划扣，B类应用从平台在第三方的账户划扣。</div>
      </div>
    </div>

    <avue-table-search
      :key="`search-${tabStatus}`"
      v-model="searchParams"
      :option="searchOption"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
      <template #menu-after>
        <!-- 其他按钮 -->
        <el-button>导出</el-button>
      </template>
    </avue-table-search>

    <div class="flex mb-16px gap-16px">
      <div class="flex-1 flex flex-col justify-center items-center bg1">
        <div class="text-24px font-600 text-#15194D">{{ consumptionAmountInfo.useTotal || "-" }}</div>
        <div class="text-12px font-400 text-#444771">消费总金额(元)</div>
      </div>
      <div class="flex-1 flex flex-col justify-center items-center bg2">
        <div class="text-24px font-600 text-#15194D">{{ consumptionAmountInfo.tenantTotal || "-" }}</div>
        <div class="text-12px font-400 text-#444771">平台消费金额(元)</div>
      </div>
      <div class="flex-1 flex flex-col justify-center items-center bg3">
        <div class="text-24px font-600 text-#15194D">{{ consumptionAmountInfo.shopTotal || "-" }}</div>
        <div class="text-12px font-400 text-#444771">商家消费金额(元)</div>
      </div>
      <div class="flex-1 flex flex-col justify-center items-center bg4">
        <div class="text-24px font-600 text-#15194D">{{ consumptionAmountInfo.profitTotal || "-" }}</div>
        <div class="text-12px font-400 text-#444771">利润总金额(元)</div>
      </div>
    </div>
    <base-table-card>
      <template #header-left>
        <!-- tabs 只绑定本地 tabStatus，不直接绑 searchParams -->
        <el-tabs v-model="tabStatus" @tab-click="handleTabClick">
          <el-tab-pane v-for="items in serviceList" :key="items.id" :label="items.name" :name="items.id" />
        </el-tabs>
      </template>

      <avue-crud
        ref="crudRef"
        v-model="formData"
        :data="tableData"
        :option="tableOption"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #bizId-header>
          <div class="flex items-center justify-center">
            关联订单
            <el-tooltip
              class="box-item"
              effect="dark"
              content="关联订单是指当前应用的消费是在该订单中操作产生的"
              placement="top-start"
            >
              <img src="@/assets/application/question.png" class="w-14px h-14px ml-3px" alt="" />
            </el-tooltip>
          </div>
        </template>
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import useCrudHook from "avue-table/useCrudHook";
  import { useUserInfoStore } from "@/store/modules/userInfo";
  import Option from "@/crudOption/application/consumption";

  const { userInfo } = useUserInfoStore();
  const tabStatus = ref();
  const consumptionAmountInfo = ref({});

  // 配置
  const { searchOption, tableOption } = Option();
  let {
    data: tableData,
    loading: tableLoading,
    page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.application.operatorSpendPage,
    // 初始与 tabStatus 对齐
    search: { status: "0" },
    // 查询参数格式化
    getParamsFormat: p => {
      const params = { ...p };
      if (Array.isArray(params.execTime) && params.execTime.length === 2) {
        params.execBeginTime = params.execTime[0];
        params.execEndTime = params.execTime[1];
      }
      delete params.execTime;
      params.tenantId = userInfo.tenantId;
      params.serviceCategoryId = tabStatus.value;
      loadConsumptionRecords(params);
      return params;
    },
    // dataFormat: r => {
    //   const res = { ...r };
    //   console.log(res);
    //   consumptionAmountInfo.value = {
    //     useTotal: res.data.useTotal || 0,
    //     tenantTotal: res.data.tenantTotal || 0,
    //     shopTotal: res.data.shopTotal || 0,
    //     profitTotal: res.data.profitTotal || 0,
    //   };
    //   return res.data.records.records;
    // },
  });

  function loadConsumptionRecords(params) {
    Api.application.operatorSpendStata(params).then(res => {
      if (res.code === "200") {
        consumptionAmountInfo.value = res.data || {};
      }
    });
  }

  function handleTabClick(tab) {
    tabStatus.value = tab.props.name;
    loadGetTableData();
  }

  const serviceList = ref([]);
  onMounted(async () => {
    await Api.application.serviceList().then(res => {
      if (res.code === "200") {
        serviceList.value = res.data.filter(item => item.id !== 4);
        tabStatus.value = serviceList.value[0]?.id;
      }
    });
    await loadGetTableData();
  });
</script>
<style lang="scss" scoped>
  .illustrate {
    border-radius: 8px;
    border: 1px solid #fff;
    background: linear-gradient(90deg, #e6f4ff 0%, #fff 100%);
  }
  .bg1,
  .bg2,
  .bg3,
  .bg4 {
    border-radius: 12px;
    border: 1px solid #fff;
    background: linear-gradient(180deg, #f4f0ff 0%, #fff 76.58%), #fff;
    height: 79px;
  }
  .bg2 {
    background: linear-gradient(180deg, #e9fcf0 0%, #fff 75.32%), #fff;
  }
  .bg3 {
    background: linear-gradient(180deg, #fff7e6 0%, #fff 75.32%);
  }
  .bg4 {
    background: linear-gradient(180deg, #e6f4ff 0%, #fff 76.58%), #fff;
  }
</style>
